<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="idangerous.swiper.css">
    <style>
        *{list-style-type:none;text-decoration: none;}
       .index_five{width: 100%; height: 630px; text-align: center; padding-top: 80px;background: #F8f8f8;}
        .index_five .ztitle{font-size: 38px;color: #e8727e; line-height: 38px; margin-bottom: 20px;}
        .index_five .ftitle{ font-size: 20px;color: #898989; margin-bottom: 60px;}
        .index_five .index_five_cont{ width:1200px; height: auto; margin:38px auto 0;color:#898989; overflow: hidden;}
        .index_five .index_five_cont .goodness .swiper-wrapper{ width: 1200px; overflow: hidden; height:450px;padding-left: 0;}
        .index_five .index_five_cont .goodness .swiper-slide a{ display: block; float: left; width:380px; background: #fff; margin-right: 17px; height: 400px;  text-align: left; }
        /*.index_five .index_five_cont .goodness .swiper-slide a:hover{box-shadow:0 15px 30px #f1f1f1;transition: all .2s linear; margin-top: -3px;}*/
        .index_five .index_five_cont .goodness .swiper-slide .ab{ width: 100%; height: 257px; overflow: hidden;}
        .index_five .index_five_cont .goodness .swiper-slide .b2{ background:#fff url(/images/index/b-2.jpg) top center no-repeat; }
        .index_five .index_five_cont .goodness .swiper-slide .b3{ background:#fff url(/images/index/b-3.jpg) top center no-repeat; }
        .index_five .index_five_cont .goodness .swiper-slide a .top1{ width: auto; padding-top: 10px; padding-right: 15px; height: 50px;  background: #fff;  border-bottom: dashed 1px #ccc; line-height: 21px; font-size: 13px; color: #323232; padding-left: 15px; }
        .index_five .index_five_cont .goodness .swiper-slide a .top1 span{ font-size: 12px; color: #646464; }
        .index_five .index_five_cont .goodness .swiper-slide a:hover .top1{ color: #E8727E; }
        .index_five .index_five_cont .goodness .swiper-slide a .top1 .right{ float:right;  margin-right: 0px; color: #848484; font-size: 12px; line-height: 15px; margin-top: 10px;}
        .index_five .index_five_cont .goodness .swiper-slide a .top1 .right span{ color: #f08300; font-size: 22px; }
        .index_five .index_five_cont .goodness .swiper-slide a .bottom1{ width: auto; height:62px; padding-left: 15px; background: #fff;  background:url(/images/index/tubiao.png)  15px center no-repeat; padding-left: 75px;  font-size: 12px; line-height: 16px;color:#848484; padding-top:15px;}
        .index_five .index_five_cont .goodness .swiper-slide a:nth-child(4){ margin-right: 0;}
        .index_five .index_five_cont .goodness{ width:1600px; height: auto; margin:0 auto; position: relative;}
        .index_five .nav-arrow{position:relative;z-index:999; width: 1200px; margin:0 auto; height: 0;}
        .index_five .nav-arrow .arrow{position:absolute;opacity:0.6}
        .index_five .nav-arrow .arrow:hover{position:absolute;opacity:1}
        .index_five .nav-arrow .arrow i{display:block;width:50px;height:200px;cursor:pointer;}
        .index_five .nav-arrow .prev{left:-60px; top:70px;}
        .index_five .nav-arrow .prev i{ background: url(zuojiantou.png) left center no-repeat; }
        .index_five .nav-arrow .next{right:-40px; top:70px;}
        .index_five .nav-arrow .next i{background: url(youjiantou.png) right center no-repeat; }
        .index_five .nav-arrow .prev:hover,.nav-arrow .next:hover{opacity:1}
        .index_five .index_five_cont .goodness .desc{ color: #666; font-size:15px; line-height: 25px;  color: #484848;}
        .index_five .index_five_cont .goodness .swiper-slide{ width: 380px!important; line-height: 25px; margin-right: 20px;} 

    </style>
</head>
<body>
    <div class="index_five">
        <div class="nav-arrow">
            <a class="arrow prev swiper-prev"><i></i></a>
            <a class="arrow next swiper-next"><i></i></a>
        </div>
        <div class="index_five_cont">
            <div class="goodness">
                <div class="section-content">
                    <div id="Goodness" class="slide swiper-container">
                        <ul class="swiper-wrapper">
                            <li class="swiper-slide">
                                <a href="/service/booking/" class="index_five_01"><div class="ab"><img alt="【精准预约】" src="http://www.bhu.ac.cn/image/01.jpg"></div><div class="top1"><span class="right">￥<span>7,999</span>元</span>【精准预约】结合个性情况，匹配名医、指...<br><span>匹配名医 · 指定预约 · 个性导诊</span></div></a>
                            </li>
                            <li class="swiper-slide">  
                                <a href="/service/vip/" class="index_five_01 b2 "><div class="ab"><img alt="【VIP尊享】" src="http://www.bhu.ac.cn/image/02.jpg"></div><div class="top1"><span class="right">￥<span>16,800</span>元</span>【VIP尊享】为国内特殊的不孕不育患者提..<br><span>特殊需求 · 严格甄选 · 绿色通道</span></div></a>
                            </li>
                            <li class="swiper-slide">
                                <a href="/service/gold/" class="index_five_01 b3 "><div class="ab"><img alt="【金牌无忧】" src="http://www.bhu.ac.cn/image/03.jpg"></div><div class="top1"><span class="right">￥<span>36,000</span>元</span>【金牌无忧】针对部分需要有更好服务体...<br><span>全程陪诊 · 星级酒店 · 医食无忧</span></div></a>
                            </li>
                            <li class="swiper-slide">
                                <a href="/service/remote/" class="index_five_01 b4 "><div class="ab"><img alt="【远程咨询】" src="http://www.bhu.ac.cn/image/04.jpg"></div><div class="top1"><span class="right">￥<span>399</span>元</span>【远程咨询】为国内多年不孕多次失败的患者提...<br><span>问诊服务 · 分析病情 · 提供依据</span></div></a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div> 
</body>
<script src="http://www.bhu.ac.cn/js/jquery.1.8.3.js"></script>
<script src="idangerous.swiper.js"></script>
<script >
    $(document).ready(function(){
        var swiperGoodness = new Swiper('#Goodness', {
            autoplayDisableOnInteraction: false,
            onlyExternal: true,
            loop: true,
            speed: 500,
            autoplay: 4000,
            slidesPerView: 4,
            slidesPerGroup:1,
            grabCursor: true,
            prevButton: '.swiper-prev',
            nextButton: '.swiper-next',
        });
        $('.index_five .swiper-prev').on('click', function(e){
            e.preventDefault();
            swiperGoodness.swipePrev();
        })
        $('.index_five .swiper-next').on('click', function(e){
            e.preventDefault();
            swiperGoodness.swipeNext();
        })
});
</script>
</html>